<template>
	<view class="bg-white w100 pt-30 pb-40" style="border-radius: 10px 10px 0px 0px;height: 0px;">
		<view class="plr-36 flexz">
			<view class="flex1 flex-middle">
				<view class="size-48 mr-20" @click="getCity">
					{{city}}
				</view>
				<view class="">
					<view class="">
						{{temperature}}°C
					</view>
					<view class="size-26 gray-2">
						{{weather}}
					</view>
				</view>
			</view>
			<view class="img-car">
				<image src="/static/img/home-car.png" mode=""></image>
			</view>
		</view>
		<view class="bb ptb-25 flexz" style="background: #f3f3f3;">
			<view class="center br u-flex-1">
				<u-icon name="clock" color="#06C391" class="gray-2 size-40"></u-icon>
				<view class="ml-20" @click="getTime">{{time}}</view>
				<view @click="time='预约时间'" v-show="time!='预约时间'" class="size-22 bg-green plr-5 white radius-10">重置
				</view>
			</view>
			<!--			<view class="center br u-flex-1">-->
			<!--				<u-icon name="account" color="#06C391" class="gray-2 size-38"></u-icon>-->
			<!--				<view class="ml-20" @click="daiti">代人叫代驾</view>-->
			<!--			</view>-->
		</view>
		<!--    选择-->

		<view class="ml-30 mt-10">选择仪器</view>
		<view class="times-list">
			<view class="checkedNo" :class="{ checkedYes: checkedArray.indexOf(i) != -1 }"
				v-for="(time, i) in timesList" :key="i" @click="appointment(i,time.id)">
				{{ time.name }} : {{ time.price }} / {{time.unit}}
			</view>
		</view>
		<!-- 起始点 -->
		<view class="plr-36">
			<view class="flex_l ptb-30 bb" @click="getAddress(1)">
				<view class="bg-green radius mt-10" style="width: 16rpx;height: 16rpx;"></view>
				<view class="ml-30">
					<view class="">{{start.name}}</view>
					<view v-if="start.flag" class="blue size-24">推荐上车点</view>
					<view v-else class="size-24">{{start.address}}</view>
				</view>
			</view>
			<view class="flex_l ptb-30" @click="getAddress(2)">
				<view class="img-point mt-10">
					<image src="/static/img/home-point.png" mode=""></image>
				</view>
				<view class="ml-30">
					<view v-if="end.address">
						<view class="">{{end.name}}</view>
						<view class="size-24">{{end.address}}</view>
					</view>
					<view v-else>
						<view class="">{{temp.name}}</view>
						<view class="size-24">{{temp.address}}</view>
					</view>
					<view v-else class="gray-2 size-32">你要去哪儿</view>
				</view>
			</view>
		</view>

		<!-- but -->
		<view class="mlr-36 pb-60">
			<u-button type="primary" @click="dj_submit">提交预约</u-button>
		</view>
		<!-- <view class="w100 bg-blue" style="height:2vh;" @click="dj_submit"></view> -->
		<!-- 时间 -->
		<u-popup v-model="showTime" mode="bottom" height="400" @close="$emit('close')">
			<longDate type="day" :openStatus="true" :getDayNum="3" :chooesMaxDay="3" @select="onSelectTime">
			</longDate>
		</u-popup>
		<u-modal v-model="showModal" :content="content" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import amapFile from '../../libs/amap-wx.js'
	import longDate from '../long-date/long-date.vue'
	export default {
		components: {
			longDate
		},
		//代人叫车
		props: ["other", "showTime", "location"],
		data() {
			return {
				time: '预约时间',
				key: '23be0b836914090ccd6c74445034a520',
				weather: '晴',
				temperature: '20',
				checkedArray: [],
				checkedArrayId: [],
				timesList: [],
				temp: {
					"address": "",
					// "latitude":"39.619420",
					// "longitude":"118.179750",
					"name": "请先选择到达地点",
					// "city":"唐山市",
					// "district":"河北省唐山市路南区",
					// "address1":"建设南路11号",
				},
				showModal: false,
				content: '请先添加紧急联系人'
			}
		},
		computed: {
			...mapState(['city', "start", "end", 'userInfo'])
		},
		mounted() {
			console.log(this.city);
			this.myAmapFun = new amapFile.AMapWX({
				key: this.key
			});
			this.getWeather()
			this.medical()
		},
		methods: {
			confirm() {
				uni.navigateTo({
					url: '/pages/transport/home/person-add'
				})
			},
			// 各类商品
			medical() {
				this.$http('/addons/ddrive/sforder/equipment_list', {
					type: 3,
				}, "POST").then((data) => {
					console.log(data)
					this.timesList = data
				})
			},
			// 选择预约时间
			appointment(index, id) {
				let that = this;
				if (that.checkedArray.indexOf(index) == -1) {
					// console.log(index); //打印下标
					that.checkedArray.push(index); //选中添加到数组里
				} else {
					that.checkedArray.splice(that.checkedArray.indexOf(index), 1); //取消
				}

				if (that.checkedArrayId.indexOf(id) == -1) {
					// console.log(index); //打印下标
					that.checkedArrayId.push(id); //选中添加到数组里
					console.log('选中添加到数组里', this.checkedArrayId)
				} else {
					that.checkedArrayId.splice(that.checkedArrayId.indexOf(id), 1); //取消
				}
			},
			//获取天气
			getWeather() {
				let _this = this
				this.myAmapFun.getWeather({
					city: this.city,
					success: (data) => {
						console.log(data);
						_this.weather = data.liveData.weather
						_this.temperature = data.liveData.temperature
					},
					fail: (msg) => {
						console.log('0');
						// uni.showToast({
						// 	title: '没有开启位置权限',
						// 	icon: 'none'
						// })
					}
				});
			},
			getCity() {
				uni.navigateTo({
					url: '/pages/transport/home/city'
				})
			},
			// 选时间
			getTime() {
				this.$emit('showTime')
			},
			daiti() {
				uni.navigateTo({
					url: '/pages/transport/home/dj-other'
				})
			},
			// 确定时间
			onSelectTime(res) {
				console.log(res);
				if (res.tip) {
					uni.showToast({
						title: res.tip,
						icon: 'none'
					})
				} else {
					this.time = res.time
					this.$emit('close')
				}
			},
			confirmTime(time) {
				console.log(time);
			},
			getAddress(type) {
				uni.navigateTo({
					url: '/pages/transport/home/search?type=' + type + '&location=' + this.location
				})
			},
			dj_submit() {
				if (Object.keys(this.end).length == 0) {
					uni.showToast({
						title: '请选择目的地',
						icon: 'none'
					})
					return;
				}
				if (!this.userInfo.emergency_contact) {
					// this.showModal = true
					uni.showToast({
						title: '请先添加紧急联系人',
						icon: 'none',
						duration:2000
					})
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/transport/home/person-add'
						})
					},2000)
					return;
				}
				let query = {
					time: this.time,
					other: this.other,
					carNeed: '',
					carType: '3',
				}
				console.log(1111, query);
				uni.navigateTo({
					url: '/pages/transport/home/dj-confirm?query=' + encodeURIComponent(JSON.stringify(query))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.times-list {
		display: flex;
		flex-wrap: wrap;
		font-size: 24rpx;

		.checkedNo {
			width: 30%;
			padding: 12rpx 3rpx;
			border-radius: 24rpx;
			text-align: center;
			line-height: 22rpx;
			margin: 30rpx 10rpx 0;
			background: #f1f1f1;
			color: #3e3e3e;
		}
	}

	.checkedYes {
		color: #FF8D33 !important;
		background: #FFF7F1 !important;

	}

	/deep/.u-primary-hover {
		background: linear-gradient(to right, #00b6b4, #00d496) !important;
	}

	.img-car {
		image {
			width: 226rpx;
			height: 98rpx;
		}
	}

	.img-point {
		image {
			width: 24rpx;
			height: 24rpx;
		}
	}
</style>